<template>
  <div class="main">
    <p class="nav justify-between">
      <img
        src="@/assets/image/icon-left_arrow.png"
        alt=""
        @click="linkToBack"
      />
      <span>{{$t('广告详情')}}</span>
      <img src="@/assets/image/edit.png" />
    </p>
    <p class="flex justify-between p-li bian">
      <span>{{$t('广告编号')}}</span>
      <span class="font-s">{{ info.id }}</span>
    </p>
    <div class="flex justify-between items-center p-li">
      <div>
        <p class="price">{{$t('价格')}}</p>
        <p>{{$t('固定价格')}}</p>
      </div>
      <p class="price-num">￥ {{ info.symbol_value }}</p>
    </div>
    <div class="bg"></div>
    <p class="flex justify-between p-li pd-t">
      <span>{{$t('交易总额')}}</span>
      <span class="font-s">{{ (info.symbol_value / 1) * (info.coin_amount / 1) }} {{ info.currency }}</span>
    </p>
    <p class="flex justify-between p-li bor">
      <span>{{$t('限额')}}</span
      ><span class="font-s"
        >{{ info.investment_min }} - {{ info.investment_max }} {{ info.currency }}</span
      >
    </p>
    <p v-for="(item, index) in payNameArr" :key="'paytype_index' + index" class="flex justify-between p-li pd-t">
      <span v-if="index === 0">{{$t('付款方式')}}</span>
      <span class="font-s flex items-center">
        <span>{{ info.establish }}</span>
        <span class="under">{{ item }}</span>
        <img src="@/assets/image/card.png" class="card-d" alt="" />
      </span>
    </p>
    <p class="flex justify-between p-li">
      <span>{{$t('汇率付款方式')}}</span>
      <span class="font-s">{{ info.pay_rate }} {{ info.currency }}</span>
    </p>
    <p class="flex justify-between p-li btm">
      <span>{{$t('状态')}}</span>
      <span class="font-s">{{$t('已结束')}}</span>
    </p>

    <div class="up">{{$t('重新上架')}}</div>
  </div>
</template>

<script>
import { getAdDetail } from '@/API/otc'
export default {
  data() {
    return {
      id: '',
      info: {
      },
    }
  },
  created() {
    this.id = this.$route.query.id
    getAdDetail({
      id: this.id,
      language: this.$i18n.locale
    }).then((res) => {
      //console.log('广告详情', res)
      this.info = res
    })
  },
  computed: {
    payNameArr() {
      if (this.info.pay_type) {
        return this.info.pay_type.split(',')
      } else {
        return []
      }
    }
  },
  methods: {
    linkToBack() {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  // padding: 0 30px;
  color: #868d9a;
  .p-li {
    // padding-bottom: 44px;
    padding: 20px 32px;
    flex-wrap: nowrap;
  }
  .pd-t {
    padding-top: 40px;
  }
}
.nav {
  display: flex;
  align-items: center;
  font-size: 33px;
  font-weight: bold;
  color: #21262f;
  padding: 30px 40px;
  img {
    width: 32px;
    height: 32px;
  }
}
.bian {
  padding: 40px 32px !important;
  border-bottom: 1px dashed #eaebee;
  border-top: 1px solid #eaebee;
}
.price {
  margin-bottom: 40px;
}
.price-num {
  font-size: 52px;
  font-weight: bold;
  color: #000;
}
.bg {
  height: 16px;
  background: #f5f5f5;
}
.font-s {
  font-weight: bold;
  color: #000;
}
.card-d {
  width: 35px;
  height: 35px;
}
.under {
  text-decoration-line: underline;
  margin: 0 16px 0 28px;
}
.btm {
  border-bottom: 1px dashed #eaebee;
}
.up {
  width: 764px;
  height: 100px;
  background: #b8bcc5;
  border-radius: 8px;
  text-align: center;
  line-height: 100px;
  margin: 60px auto;
  color: #292c2f;
  font-size: 36px;
}
</style>
